<template>
  <div>
    <div class="index-article-box">
      <div class="msg-text">来都来了。</div>
      <div class="msg-title">添加新留言</div>
      <el-form :model="leaveMsgForm" :rules="fromRules" ref="leaveMsgForm">
        <el-form-item prop="msg">
          <el-input
            :autosize="{ minRows: 2, maxRows: 6 }"
            v-model="leaveMsgForm.msg"
            type="textarea"
            minlength="1"
            maxlength="500"
            placeholder="*请输入留言"
          ></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <el-input
            v-model="leaveMsgForm.name"
            placeholder="*请输入昵称"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input
            v-model="leaveMsgForm.email"
            placeholder="*请输入邮箱"
            type="email"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sumitClick">提交留言</el-button>
        </el-form-item>
      </el-form>
      <template v-if="MsgList">
        <div>已有{{ MsgList.length }}条留言</div>
        <div class="msg-box" v-for="(item, index) in MsgList" :key="index">
          <div>
            <span>{{ item.name }}</span>
            <span>{{ item.time }}</span>
          </div>
          <div>{{ item.msg }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {
      MsgList: [
        { name: "wmm", time: "2021年10月09日", msg: "hihihihihi" },
        { name: "wmm", time: "2021年10月09日", msg: "hihihihihi" },
        { name: "wmm", time: "2021年10月09日", msg: "hihihihihi" },
        { name: "wmm", time: "2021年10月09日", msg: "hihihihihi" },
      ],
      leaveMsgForm: {
        name: "",
        msg: "",
        email: "",
      },
      fromRules: {
        msg: [
          {
            required: true,
            message: "请输入留言",
            trigger: "blur",
          },
          {
            min: 2,
            max: 500,
            message: "长度在2~500",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入昵称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 20,
            message: "长度在1~20",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            type: "email",
            message: "邮箱格式有误",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {},

  //登录时候按enter键进入
  created() {},

  beforeDestroy() {},

  methods: {
    sumitClick() {
      this.$refs.leaveMsgForm.validate((valid) => {
        if (valid) {
          console.log(this.leaveMsgForm);
        } else {
          console.log("表单有误");
          return;
        }
      });
    },
  },
};
</script>

<style scoped>
.msg-box{
  padding:20px;
  border-bottom: 1px solid #ccc;
}
.msg-box div span:first-child{
  font-size: 22px;
  font-weight: 500;
  margin-right: 10px;
}
.msg-box div span:nth-child(2){
  color: grey;
  font-size: 10px;
}
.msg-title {
  font-size: 24px;
  margin: 10px 0;
  color:#91aca5;
  font-weight: bold;
}
.msg-text {
  text-align: center;
  font-size: 20px;
  color: #38393b;
  font-weight: bold;
}

.index-article-box {
  max-width: 808px;
  margin: 60px auto;
  padding-bottom: 100px;
}

/* @media screen and (max-width: 750px) {
  .index-bar {
    display: none;
  }
} */
</style>